<template>
  <div class="wft-w-100">
    <div class="wft-data-analysis" :style="contentStyle" @click="chooseIcon">
      <i :class="propValue" class="icon" />
      <div class="wft-data-analysis-mask">
        <div class="wft-data-analysis-mask-edit">
          <span>{{ text }}</span>
        </div>
      </div>
    </div>
    <IconsDialog ref="IconsDialogRef" @confirm="confirm" />
  </div>
</template>
<script setup lang="ts">
import { computed, defineAsyncComponent, ref } from 'vue';

const IconsDialog = defineAsyncComponent(() => import('./icons.vue'))

const IconsDialogRef = ref<InstanceType<typeof IconsDialog>>()

const props = withDefaults(defineProps<{
  text?: string,
  bgColor?: string,
  width?: number | string,
  height?: number | string
}>(), {
  text: '选择图标',
  bgColor: '#fff',
  width: '95%',
  height: 40
})

const contentStyle = computed(() => {
  return {
    width: typeof props.width == 'number' ? props.width + 'px' : props.width,
    height: typeof props.height == 'number' ? props.height + 'px' : props.height,
    backgroundColor: props.bgColor
  }
})

const propValue = defineModel<string>('modelValue', { default: 'u-iconfont uicon-level' })

function chooseIcon () {
  IconsDialogRef.value!.init(propValue.value)
}

function confirm (name: string) {
  propValue.value = name
}
</script>
<style scoped>
.wft-data-analysis {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #eaeefb;
  border-radius: 4px;
  background-color: #fff;
  color: #606266;
  font-size: 20px;
  box-sizing: border-box;
  position: relative;
  cursor: pointer;
}

.wft-data-analysis-mask {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border: 1px solid #00a2ff;
  background-color: #ecf5ff;
  border-radius: 4px;
  opacity: 0;
  transition: opacity .3s;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wft-data-analysis-mask:hover {
  opacity: 0.9;
}

.wft-data-analysis-mask-edit {
  width: 90%;
  height: 26px;
  text-align: center;
  line-height: 26px;
  font-size: 14px;
  border-radius: 4px;
  color: #2f54eb;
  background-color: rgba(0, 162, 255, .5);
}
</style>
